<template>
    <div class="topBtn">
        <input
            type="text"
            name=""
            id="job-input"
            class="input"
            v-model="value"
            @keyup.enter="addtodo"
            autocomplete="off"
            autofocus="autofocus"
            placeholder="创建待办事项"
        />
        <button class="button jobAdd-btn iconfont" @click="addtodo">
            &#xe628;
        </button>
    </div>
</template>

<script>
export default {
    components: {},
    props: {},
    data() {
        return {
            value: '',
        }
    },
    watch: {},
    computed: {},
    methods: {
        addtodo() {
            if (this.value == '') {
                this.$message({
                    showClose: true,
                    message: '你还没有输入内容呢',
                    type: 'warning',
                })
            } else {
                this.$emit('addchildFn', this.value)
                this.value = ''
            }
        },
    },
    created() {},
    mounted() {},
}
</script>
<style lang="less" scoped>
#job-input {
    width: 400px;
    margin-right: 15px;
    border-radius: 0px;
    border: 0;
    vertical-align: top;
}
.jobAdd-btn {
    padding: 0 20px;
    color: #fff;
    background-color: #dddddd;
    border: 0;
    height: 34px;
    transition: all 0.6s;
}
.jobAdd-btn:hover {
    background-color: #0066ff;
}
</style>
